<template>
  <div>
    <div class="header1">
      <Header />
    </div>
    <div id="nav">
      <Navs_dlog />
    </div>
    <div id="name">
      <div class="left">{{ $store.state.hearos2.title }}</div>
      <div class="right">
        <ul>
          <li>概述页</li>
          <li>参数页</li>
          <li>F码通道</li>
          <li>咨询客服</li>
          <li>用户评价</li>
        </ul>
      </div>
    </div>
    <div id="center">
      <div class="img">
        <img :src="$store.state.hearos2.images" alt />
      </div>
      <div class="font">
        <span>
          <p style="font-size: 30px">{{ $store.state.hearos2.title }}</p>
          <br />

          <p>{{$store.state.hearos2.intro}}</p>
          <p style="color: #ff6700">天奇图书</p>
          <!-- <div>{{ $store.state.hearos2.price }}</div> -->
        </span>
        <br />
        <br />
        <div class="total">
          <p>单价：￥{{ $store.state.hearos2.price }}</p>
          <br />
          <button @click="cart">加入购物车</button>
          <button>收藏</button>
        </div>
      </div>
    </div>
    <div class="fot">
      <Fotter_dlog />
    </div>
  </div>
</template>
<style scoped>
.header1 {
  width: 100%;
  height: 40px;
}
#nav {
  width: 1350px;
  height: 90px;
  margin: 0 auto;
  /* background-color: yellow; */
}
#name {
  width: 100%;
  height: 60px;
  /* background-color: red; */
  overflow: hidden;
  border-top: 2px solid rgb(244, 244, 244);
  border-bottom: 2px solid rgb(244, 244, 244);
  box-shadow: 0px 0px 0px 0px #ff0000,
    /*上边阴影  红色*/ 0px 0px 0px 0px #3bee17,
    /*左边阴影  绿色*/ 0px 0px 0px 0px #2279ee,
    /*右边阴影  蓝色*/ 0px 4px 5px 0px rgb(242, 242, 242); /*下边阴影  黄色*/
}
#name .left {
  float: left;
  display: flex;
  margin-left: 10%;
  margin-top: 15px;
  font-size: 20px;
}
#name .right li {
  float: right;
  margin: 20px;
  list-style: none;
  font-size: 15px;
  color: black;
  position: relative;
  right: 15%;
}

#center {
  width: 80%;
  height: 720px;
  margin-left: 10%;
  /* background-color: red; */
}
#center .img {
  width: 40%;
  height: 500px;
  /* background-color: yellow; */
  position: relative;
  top: 5%;
  left: 5%;
  float: left;
}
#center .img > img {
  height: 100%;
  width: 100%;
}
#center .font {
  width: 50%;
  height: 90%;
  /* background-color: blue; */
  float: left;
  margin-left: 7%;
}
.buttom {
  width: 80%;
  height: 60px;
  /* background-color: crimson; */
  font-size: 25px;
}
.xh button {
  border: 1px solid rgb(224, 224, 224);
  width: 550px;
  height: 50px;
  margin-top: 15px;
  margin-left: 5px;
  background: white;
}
.color button {
  border: 1px solid rgb(224, 224, 224);
  width: 40%;
  height: 50px;
  margin-top: 15px;
  margin-left: 5px;
  background: white;
}
button:hover {
  border: 1px solid #ff6700;
}
.total {
  width: 607px;
  height: 268px;
}
.total > p {
  text-align: center;
  color: rgb(255, 103, 0);
  font-size: 18px;
}
.total button {
  margin-left: 10%;
  background: #ff6700;
  border: 1px solid #ff6700;
  width: 80%;
  height: 50px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 10px;
}
</style>
<script>
import Header from "@/components/Header_dlog.vue";
import Navs_dlog from "@/components/Navs_dlog.vue";
import { mapState } from "vuex";
export default {
  name: "Details",
  components: { Header, Navs_dlog },
  methods: {
    cart() {
      this.$store.dispatch("addcart");
      // 路由跳转至购物车
      this.$router.push("/Cart");
    },
  },
  computed: {
    ...mapState(["hearos"]),
  },
};
</script>
